<template>
  <el-row class="tac h100" >
    <el-col :span="4">
      <el-menu
        default-active="/home/sysctrl/person"
        :default-openeds="['sysctrl']"
        router
        class="el-menu-vertical-demo h100"
        background-color="rgb(1, 20, 44)"
        :uniqueOpened="true"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu :index="menu.path" v-for="menu in firstMenu" :key="menu.path">
          <template #title>
            <i :class="'el-icon-'+menu['meta']['icon']"></i>
            <span>{{menu['meta']['title']}}</span>
          </template>
        <el-menu-item v-for="secMenu in menu.children" :key="secMenu.path" :index="'/home/'+menu.path+'/'+secMenu.path">{{secMenu['meta']['title']}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col
      :span="20"
    >
      <router-view />
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      firstMenu: [],
    };
  },
  created: function () {
    const homeRoutes = this.$router.options.routes.find(
      (r) => r.path == "/home"
    );
    homeRoutes['children'].map(route=>{
      if(route.meta) this.firstMenu.push(route)
    })
    console.log(this.firstMenu);
  },
  mounted: function () {
    console.log("router", this.$router.options.routes);
  },
};
</script>
<style scoped>
.h100 {
  height: 100%;
}
 
</style>